
@font-face { font-family: "iconfont"; src: url('./assets/font.ttf') format('truetype'); }
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
@font-face {
    font-family: "WorkSans-Bold";
    src: url('./assets/WorkSans-Bold.ttf');
}
// ::-webkit-scrollbar-track { background: transparent;; }
::-webkit-scrollbar { width: 4px; height: 8px; }
::-webkit-scrollbar-thumb { width: 8px; border-radius: 4px; background: rgba($end-color,.1); }

.el-switch__label--left { margin-right: 3px!important; }
.el-switch__label--right { margin-left: 3px!important; }
.el-checkbox__label { padding-left:5px!important; }

html,body,#app { padding:0; margin: 0; width: 100%; height: 100%; color: #333; }
// a { color: #333; text-decoration: none; }
input[type="text"],input[type="password"],textarea { margin: 0; padding:0; box-sizing: border-box; border-radius: 0!important; border-color: $line-color; }
/* .input input[type="text"], .input input[type="password"] { padding-left:35px!important; } */
textarea { padding-top: 10px!important; }
.el-input__inner, .el-input__wrapper { border-radius: 0!important; }
.el-switch__label { font-weight: normal!important; }
.el-radio__label { font-weight: normal!important; }
.el-checkbox__label { font-weight: normal!important; }
.hidtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wraptext { overflow: hidden; word-break:break-all; }
.hand { cursor: pointer; }
.w80 { width:80px!important; }
.w90 { width:80px!important; }
.w100 { width:100px!important; }
.w120 { width:120px!important; }
.w140 { width:140px!important; }
.w160 { width:160px!important; }
.w180 { width:180px!important; }
.w200 { width:200px!important; }
.w220 { width:220px!important; }

.searchDiv { display: flex; 
    .searchRight { display: flex; justify-content: flex-start; }
    .searchLeft{ flex: 1; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;.serlabelB{display: flex; align-items: center;} }
    .search_key { width:140px; }
    .search_select { margin: 0 5px 0 0; }
}

/* #btn */
.submits { display: flex; flex: 1; justify-content: flex-end; }
.btn { height: 32px; line-height: 32px; display: inline-block; cursor: pointer; padding: 0 25px; font-size: 14px; font-weight: bold; border-radius: 4px; background-color: $end-color !important; color: $font-color !important; }
.linebtn{background: rgba($end-color,.1) !important;color: $end-color !important;}
.linebtn:hover{background: $end-color !important; color: #fff !important;}
.add:hover { box-shadow: 0 0px 5px rgb(darken($font-color, 0%), .8); }
.add { height: 32px; line-height: 32px; box-sizing: border-box; font-size: 12px; cursor: pointer; }
.clear { margin-right: 8px; }
.search, .download { height: 32px; line-height: 32px; min-width: 32px; font-size: 12px; padding:0 15px; border:1px solid $line-color; box-sizing: border-box; text-align: center; cursor: pointer; }
.refresh{ padding:0 15px; background-color: #fff !important; color: #000 !important; font-weight: 400;border:1px solid #e0e0e0 !important; box-sizing: border-box;}
.search { border-left: 0; }
// .search::after { content: '\e63c'; font-family: "iconfont"; color: darken($font-color, 0%); }
.refresh, .download { }
// .refresh::after { content:'\e650'; font-family: "iconfont"; color: darken($font-color, 0%); }
// .download::after { content:'\e640'; font-family: "iconfont"; color: darken($font-color, 0%); }

/* table */
.listDiv { display: flex; flex-direction: column; height: 100%; 
    &.innerDiv { padding: 0 20px; background-color: #f4f4f4; }
}
// .listDiv.subListDiv { top:50px; padding: 0 20px 20px 20px; }
.table { display: flex;  flex-direction: column; color: $font-table-color; font-size: 12px; /*flex:1;*/ min-height: 0; /*这会导致内部撑开而不撑爆 */ 
    ul,li {list-style: none; padding:0; margin: 0; display: flex; align-items: center; cursor: pointer; box-sizing: border-box; }
    ul { min-height: 50px; align-items: stretch; border-left: 0; border-right: 0; /*margin: 5px 0;*/ box-sizing: border-box; min-width: max-content;
        &.img { min-height: 40px; }
        li { padding-left: 5px; padding-right: 5px;
            border-bottom: solid 1px rgba(0,0,0,0.06);
            border-right: solid 1px rgba(0,0,0,0.06);
            box-sizing: border-box;
        }
        li:last-child{border-right: 0;}
        
    }
    ul:not(.head):hover { background-color: $gray-end-color; }
    .head { min-height: 50px; height: 50px; font-weight: bold; position: sticky; top: 0px; margin-top: 0; z-index: 1; 
        li { background-color: $gray-end-color; display: flex; align-items: center; justify-content: center; }
        .fixed { box-sizing: border-box; }
    }
    .body { min-height: 0; overflow: auto; scrollbar-gutter: both-edges; /*此方法解决了滚动条有时有有时没有的布局问题*/
        &:empty { overflow: hidden; } 
        &:empty::after { content: "无数据"; color: #999; display: block; width: 100%;height: 100px; line-height: 100px; text-align: center; }
    }
    .fixed { position: sticky;
        &.l { left: 0; }
        &.r { right: 0; }
        &.ls { box-shadow: 6px 0px 8px -4px rgba(0, 0, 0, 0.15); }
        &.rs { box-shadow: -6px 0px 8px -4px rgba(0, 0, 0, 0.15); }
    }
    // .fixed::before{
    //     position: absolute; right: 0; top: 0; display: block; width: 1px; height: 100%; box-shadow: 7px 0px 7px -2px rgba(0, 0, 0, 0.1);
    // }
}
// .table .body .btns { color:#0070CC; }
// .table .body .btns a { color:#0070CC; margin: 0 5px 0 5px; cursor: pointer; }
// .table li {  border-right: 1px solid #d8dae2; }
// .table .body ul:last-child { border-bottom: 0; }

li.liflex { flex:1  }
li.lisex { width: 40px; min-width: 40px; }
li.litime { width: 140px; min-width: 130px; }
li.liday { width: 90px; min-width: 90px; }
li.limobile { width: 90px; min-width: 90px; }
li.liidcard { width: 140px; min-width: 140px; }
li.liimg { width: 60px; min-width: 60px; }
li.liimg img { max-height: 50px; width: 50px; min-width: 50px; object-fit: cover; }
li.listate { width: 100px; min-width: 100px; }
li.liaction.a1 { width: 40px; min-width: 40px; }
li.liaction { width: 70px; min-width: 70px; }
li.liaction u { margin-right:5px; cursor: pointer; color: $blue-color; text-decoration: none; }
li.li20 { width: 20px; min-width: 20px; }
li.li30 { width: 30px; min-width: 30px; }
li.li40 { width: 40px; min-width: 40px; }
li.li50 { width: 50px; min-width: 50px; }
li.li60 { width: 60px; min-width: 60px; }
li.li70 { width: 70px; min-width: 70px; }
li.li80 { width: 80px; min-width: 80px; }
li.li90 { width: 90px; min-width: 90px; }
li.li100 { width: 100px; min-width: 100px; }
li.li110 { width: 110px; min-width: 110px; }
li.li120 { width: 120px; min-width: 120px; }
li.li130 { width: 130px; min-width: 130px; }
li.li140 { width: 140px; min-width: 140px; }
li.li150 { width: 150px; min-width: 150px; }
li.li160 { width: 160px; min-width: 160px; }
li.li170 { width: 170px; min-width: 170px; }
li.li180 { width: 180px; min-width: 180px; }
li.li190 { width: 190px; min-width: 190px; }
li.li220 { width: 220px; min-width: 220px; }
li.li240 { width: 240px; min-width: 240px; }
li.li260 { width: 260px; min-width: 260px; }

.el-drawer { border-left: 5px solid $end-color; }
.el-drawer__body { overflow: hidden!important; padding: 0!important; }
.form { height: 100%; display: flex; flex-direction: column;
    .el-form { flex: 1; overflow: auto; }
    .btns { display: flex; justify-content: flex-end; align-items: flex-end; }
}
.dialog_form {
    .el-form { flex: 1; overflow: auto; padding-top: 20px; }
}

.el-dialog { border-radius: 10px!important; border: 3px solid lighten($end-color, 10%); box-shadow: 0 10px 20px rgba(darken($start-color, 10%), 0.5)!important; }

/* tinymce */
.tox .tox-tbtn--select { width:85px!important; }

/* 时间框 */
/* .date_picker { width: 120px; } */
.date_picker input { padding-left: 5px!important; }
.date_range input { padding-left: 5px!important; padding-right: 10px; }

//布局
.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex-row { display: flex;flex-direction: row;}
.flex-row-center { display: flex;flex-direction: row;align-items: center;}
.flex-row-end { display: flex;flex-direction: row;align-items: center;justify-content: flex-end;}
.flex-column { display: flex;flex-direction: column;}
.flex-column-center { display: flex;flex-direction: column;align-items: center;}
.flex-center { display: flex;align-items: center;justify-content: center;}
.al-flex-end{align-items: flex-end;}
.al-flex-start{align-items: flex-start;}
.ju-flex-end{justify-content: flex-end;}
.ju-flex-start{justify-content: flex-start;}
.ju-between{justify-content: space-between;}
.ju-around{justify-content: space-around;}
.row-between{align-items: space-between;}
.row-around{align-items: space-around;}
.wrap{flex-wrap: wrap;}

.ml5{margin-left: 5px;}
.mr5{margin-right: 5px;}
.ml10{margin-left: 10px;}
.mb10{margin-bottom: 10px;}

.pd5{padding: 5px;box-sizing: border-box;}
.pd10{padding: 10px;box-sizing: border-box;}
.pd20{padding: 20px;box-sizing: border-box;}
.pd30{padding: 30px;box-sizing: border-box;}
.pd5-row{padding-left: 5px;padding-right:5px;box-sizing: border-box;}
.pd10-row{padding-left: 10px;padding-right:10px;box-sizing: border-box;}
.pd15-row{padding-left: 15px;padding-right:10px;box-sizing: border-box;}
.pd20-row{padding-left: 20px;padding-right:20px;box-sizing: border-box;}
.pd30-row{padding-left: 30px;padding-right:30px;box-sizing: border-box;}
.pd50-row{padding-left: 50px;padding-right:50px;box-sizing: border-box;}
.pd10-column{padding-top: 10px;padding-bottom:10px; box-sizing: border-box;}
.pd20-column{padding-top: 20px;padding-bottom:20px; box-sizing: border-box;}
.pd30-column{padding-top: 30px;padding-bottom:30px; box-sizing: border-box;}
.pd50-column{padding-top: 50px;padding-bottom:50px; box-sizing: border-box;}

.mt4{margin-top: 4px;}
.mt6{margin-top: 6px;}
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb60 { margin-bottom: 60px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt60 { margin-top: 60px !important; }

.pt4{box-sizing: border-box;padding-top: 4px;}
.pt6{box-sizing: border-box;padding-top: 6px;}
.pt10{box-sizing: border-box;padding-top: 10px;}
.pt20{box-sizing: border-box;padding-top: 20px;}
.pt30{box-sizing: border-box;padding-top: 30px;}
.pb20{box-sizing: border-box;padding-bottom: 20px;}
.pb10{box-sizing: border-box;padding-bottom: 10px;}
.pb30{box-sizing: border-box;padding-bottom: 30px;}
.pl10{box-sizing: border-box;padding-left: 10px;}
.pl15{box-sizing: border-box;padding-left: 15px !important;}
.pl20{box-sizing: border-box;padding-left: 20px;}
.pl60{box-sizing: border-box;padding-left: 60px;}
.pl30{box-sizing: border-box;padding-left: 30px;}
.pr10{box-sizing: border-box;padding-right: 10px;}
.pr15{box-sizing: border-box;padding-right: 15px !important;}
.pr20{box-sizing: border-box;padding-right: 20px;}
.pr30{box-sizing: border-box;padding-right: 30px;}
.pr60{box-sizing: border-box;padding-right: 60px;}

.w100_{width: 100%;}.h100_{height: 100%;}

.overflow-y{overflow-y: auto;}.overflow-x{overflow-x: auto;}.hidden{overflow: hidden;}

//其他
.w100{width: 100%;}
.lineOne{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.nodatas{font-size: 12px;color: #999;}
.radius10{border-radius: 10px;}
.pointer{cursor: pointer;}
.weight{font-weight: bold;}
.greycolor{color: #666;}
.minicolor{color: #999;}
.red{color: $red-color;}
.line_{width: 100%;min-height: 5px;background-color: rgba($line-color, 60%);}
.line_h{height: 100%;min-width: 5px;background-color: rgba($line-color, 60%);}

.f16{font-size: 16px;}
.f14{font-size: 14px;}

.whitebg{background: #fff;}

.showLogbox{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff;z-index: 1;}
.arrowfont{width: 16px;height: 16px;}

// element-plus
.el-drawer__title,.titleLabel{font-size: 15px !important;font-weight: bold; color: #444; display: flex;align-items: center;}
.el-drawer__title::before,.titleLabel::before{content: '';display: block;width: 4px;height: 16px;border-radius: 4px;background: $end-color;margin-right: 5px;}
.el-timeline{padding-left: 10px;}
.el-descriptions__body{padding: 20px;box-sizing: border-box;}
.el-tag{background-color: lighten($end-color, 50%) !important;color: $end-color !important;}
.searchLeft{.el-form-item__label{margin-bottom: 0 !important;padding: 0 !important;}}
.el-pagination{display: flex; justify-content: flex-end;.is-active{background-color: $end-color !important;}.el-input__wrapper,.is-focus{box-shadow:0 0 0 1 $end-color !important;}}
.el-dropdown-menu__item:hover{background-color: rgba($end-color,0.1) !important; color: $end-color !important;}
.staricon{font-size: 20px !important;margin-top: 3px;}
.StarFilled{font-size: 19px !important;margin-top: 3px;}
.el-cascader{width: 100%;}
.item-form-row{display: flex !important; flex-direction: row !important; align-items: center !important;}
.form-label::before{color: $red-color;content: "*";margin-right: 4px;}
.form-label{color: #606266;}
.form-item-inline{margin-bottom: 0 !important;.el-form-item__content,.el-checkbox{height: 15px !important;}}